
<div class="search-backdrop" ng-if="ctrl.isOpen"></div>

<div class="search-container" ng-if="ctrl.isOpen">

  <search-field
    query="ctrl.query"
    autoFocus="ctrl.giveSearchFocus"
    on-change="ctrl.onQueryChange"
    on-key-down="ctrl.onKeyDown"
  />


	<div class="search-dropdown">
    <div class="search-dropdown__col_1">
      <div class="search-results-scroller">
        <div class="search-results-container" grafana-scrollbar>
          <h6 ng-show="!ctrl.isLoading && ctrl.results.length === 0">No dashboards matching your query were found.</h6>
          <dashboard-search-results
            results="ctrl.results"
            on-tag-selected="ctrl.filterByTag($tag)"
            on-folder-expanding="ctrl.folderExpanding()"
            on-folder-expanded="ctrl.folderExpanded($folder)" />
        </div>
      </div>
    </div>

    <div class="search-dropdown__col_2">
      <div class="search-filter-box" ng-click="ctrl.onFilterboxClick()">
        <div class="search-filter-box__header">
          <i class="fa fa-filter"></i>
          Filter by:
          <a class="pointer pull-right small" ng-click="ctrl.clearSearchFilter()">
            <i class="fa fa-remove"></i> Clear
          </a>
        </div>

        <tag-filter tags="ctrl.query.tags" tagOptions="ctrl.getTags" on-change="ctrl.onTagFiltersChanged">
        </tag-filter>
      </div>

      <div class="search-filter-box" ng-if="ctrl.isEditor || ctrl.hasEditPermissionInFolders">
        <a href="dashboard/new" class="search-filter-box-link">
          <i class="gicon gicon-dashboard-new"></i> New dashboard
        </a>
        <a href="dashboards/folder/new" class="search-filter-box-link" ng-if="ctrl.isEditor">
          <i class="gicon gicon-folder-new"></i> New folder
        </a>
        <a href="dashboard/import" class="search-filter-box-link" ng-if="ctrl.isEditor || ctrl.hasEditPermissionInFolders">
          <i class="gicon gicon-dashboard-import"></i> Import dashboard
        </a>
        <a class="search-filter-box-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
          <img src="public/img/icn-dashboard-tiny.svg" width="20" /> Find dashboards on Grafana.com
        </a>
      </div>
    </div>
  </div>
</div>

